<%@ page import="dao.GoodsDao" %>
<%@ page import="entity.Goods" %>
<%@ page import="java.util.List" %>
<%@ page import="dao.TypeDao" %>
<%@ page import="entity.Type" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>网上购物系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/sub-menu.css">
    <link rel="stylesheet" href="css/top-part.css">
    <!-- 引入Font Awesome的CSS文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!--使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签-->
    <!--使IE6、7、8版本浏览器兼容css3样式-->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>

    <![endif]-->
    <style>
        .container {
            background: cornsilk;
        }
        .carousel {
            position: relative;
            width: auto;
            display: inline-block;
        }
        .carousel-inner>.item>img{
            width: 100%;
        }
        .row.row-goods{
            margin: 30px 0;
        }
        .row.row-goods img {
            width: 100%;
        }
        .col-md-12.title{
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 28px;
            font-family:"微软雅黑" ;
        }
        .border{
            background: url("images/border.png") no-repeat;
            height: 12px;
        }
        .bor-l{
            padding: 0 0 0 12px;
            background-position: 0 0;
        }
        .bor-r{
            padding: 0 12px 0 0;
            background-position:right -24px;
        }
        .bor-m {
            background: url("images/border.png");
            height: 12px;
            background-position: -12px -12px;
        }
        .k-border{
            padding-top: 24px;
        }
        ul.list-group.list-group-2 {
            width: 83%;
            text-align: right;
        }
        ul.list-group.list-group-2 li {
            background: none;
        }
        ul.list-group.list-group-2 li img{
            width: 100%;
        }
        .goods_item {
            display: inline-block;
            width: 234px;
            height: 366px;
            padding: 22px 20px 0;
            margin: 10px 25px;
            color: #9b9b9b;
            box-sizing: border-box;
            background: #fff;
        }
        .goods_item:hover {
            border: 2px solid #fe938c;
        }

        /* 搜索框 */
        .search-group {
            width: 70%;
            margin: 0 auto;
            padding: 4px 0 4px 0;
        }
        .form-control{
            height: 35px;
        }
        .btn-search{
            /* padding: 4px 0 4px 0; */
            margin-top: -6px;
            padding: 4px 12px;
            background: #ff6200;
            color: #fff;
            font-size: 19px;
        }
        .btn-search:hover {
            color: #fff;
            background-color: #f06000;
        }
        .goods_describe{
            height: 30px;
            font-size: 14px;
            padding: 15px 0;
            white-space: normal;
        }
        .goods_describe span {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 限制文本显示的行数 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 使用省略号代替多余部分 */
        }
        .goods_price{
            height: 24px;
            margin: 30px 0px 4px -3px;
            font-size: 18px;
            color: #fd3f31;
        }
        .goods_storeName{
            font-size: 12px;
            border-bottom: 1px solid #e7e7e7;
        }
        .goods_sales{
            margin-top: 10px;
            padding-left: 115px;
        }
        /* 侧边导航 */
        /* 设置导航栏容器的样式 */
        .fixed-nav {
            position: fixed;
            top: 40%;
            right: 10px;
            background-color: #ff6363;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 设置导航链接的样式 */
        .fixed-nav a {
            display: block;
            margin-bottom: 10px;
            text-decoration: none;
            color: #fff;
            font-size: 16px;
            line-height: 1.5;
            padding: 5px 10px;
            border-radius: 5px;
            transition: all 0.3s;
        }

        /* 设置导航链接悬停时的样式 */
        .fixed-nav a:hover {
            background-color: #0a95ff;
            color: #fff;
        }

        ul.list-group.list-group-1 {
            text-align: right;
            padding: 5px 30px 0 0;
            background: #eee;
        }
        li.list-group-item.list1 {
            display: inline-block;
            border: 0;
            background: #eee;
        }

        ul.list-group.list-group-1 a{
            color: #0e0e0e;

        }
        /******login弹出层样式****/

        .form{
            width: 350px;
            background-color: #fff;
            height: 220px;
            margin: 10px auto;
        }
        .form>div{
            position: relative;
            line-height: 100%;
            margin-bottom: 8px;
        }
        .form>div input{
            width: 100%;
            height: 35px;
            border-radius: 3px;
            border: 1px solid #ddd;
            text-indent: 40px;
        }
        .form>div label{
            position: absolute;
            left: 0;
            top:10px;
            width: 30px;
            text-align: right;
            color: #808080;
        }
        .form .yanzhengma input{
            width: 50%;
            text-indent: 10px;
        }
        .form .yanzhengma img{
            height: 30px;
            width: 75px;
            font-size: 0;
            vertical-align: middle;
        }
        .form .yanzhengma a{
            font-size: small;
            text-decoration: none;
            color: #00a5e0;
        }
        .form>div.chk label{
            width: 100px;
            padding-left: 20px;
        }
        .form>div.chk input{
            width: 22px;
            height: 22px;
            margin-top: 8px;
        }
        .form>div.chk a{
            float: right;
            margin-top: 9px;
            text-decoration: none;
            color: #00a5e0;
        }
        .buts button{
            width: 48%;
            float: left;
        }
        .buts button:first-child{
            margin-right: 4%;
        }
    </style>
</head>
<%
    TypeDao typeDao = new TypeDao();
    List<Type> allTypes = typeDao.selectAllTypes();
    request.getSession().setAttribute("allTypes",allTypes);
    GoodsDao goodsDao = new GoodsDao();
    List<Goods> allGoods = goodsDao.selectAllGoods();
    request.getSession().setAttribute("allGoods", allGoods);
    List<Goods> hootGoods = goodsDao.selectHotGoods();
    request.getSession().setAttribute("hootGoods", hootGoods);
    List<Goods> specialGoods = goodsDao.selectSpecialGoods();
    request.getSession().setAttribute("specialGoods", specialGoods);
    List<Goods> newGoods = goodsDao.selectNewGoods();
    request.getSession().setAttribute("newGoods", newGoods);
%>
<body>
<!--顶部导航-->
<ul class="list-group list-group-1" id="top-part">
    <li class="list-group-item list1"><a href="./index.jsp"><i class="fa fa-home"></i> 首页</a></li>
    <c:if test="${empty user }">
        <li class="list-group-item list1">登录【<a href="" data-toggle="modal" data-target="#myModalLogin" style="font-size: small;color:#e4393c ">请登录</a>】</li>
    </c:if>
    <li role="presentation" class="dropdown list-group-item list1">
        <c:if test="${!empty user }">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                <img src="${user.headImg }" style="border-radius: 50%;width: 25px;height: 25px;"/><b>${user.nickname }</b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="user.jsp">个人设置</a></li>
                <li><a href="../logout">退出</a></li>
            </ul>
            <c:if test="${user.role == 1}">
                <li class="list-group-item list1"><a href="../backend/main.jsp"><i class="fa fa-cog"></i> 后台管理</a></li>
            </c:if>
        </c:if>
    </li>
    <li class="list-group-item list1"><a href="../myCartServlet"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true" style="color:#c63205"></span> 购物车</a></li>
    <li class="list-group-item list1"><a href="../selectOrder"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 我的订单</a></li>
</ul>
<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">欢迎登陆</h4>
            </div>
            <div class="modal-body">
                <form action="../login.do" class="form">
                    <div class="name">
                        <label for="loginname"><span class="glyphicon glyphicon-user"></span></label>
                        <input type="text" placeholder="用户名" id="loginname"  name="loginname">
                    </div>
                    <div class="password">
                        <label for="pwd"><span class="glyphicon glyphicon-lock"></span></label>
                        <input type="password" placeholder="请输入密码"  id="pwd" name="pwd">
                    </div>
                    <div class="yanzhengma">
                        <input type="text" placeholder="输入验证码"  id="yanzhengma" name="yanzhengma" width="50%">
                        <img src="images/yanzhengma.JPG" alt="" height="35" width="80">
                        <a href="#">换一张</a>
                    </div>
                    <div class="chk">
                        <label for="ch1" width="60px">10天免登陆</label>
                        <input type="checkbox" id="ch1">
                        <a href="register.jsp">免费注册</a>
                    </div>
                    <div class="buts">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-success">登陆</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 侧边导航 -->
<div class="fixed-nav">
    <div class="fixed-nav">
        <a href="#hot-goods"><i class="fas fa-fire"></i> 热卖商品</a>
        <a href="#special-goods"><i class="fas fa-gift"></i> 特价商品</a>
        <a href="#new-goods"><i class="fas fa-newspaper"></i> 最新商品</a>
        <a href="#top-part" id="back-to-top"><i class="fas fa-arrow-up"></i>回到顶部</a>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12" style="height: 43px;background: #f66060"></div>
    </div>
    <!--二级菜单、图片轮播-->
    <div class="row">
        <div class="col-md-3">
            <div class="toptitle">
                <a href="../sortGoods" style="padding-left:30px ;color:#fff;">全部商品分类</a>
            </div>
            <ul class="topmenu" id="topmenu">
                <c:forEach var="type" items="${allTypes}" varStatus="loop">
                    <c:if test="${loop.index < 11}">
                        <li>
                            <a href="../sortGoods?typeId=${type.typeId}">${type.typeName}</a>
                        </li>
                    </c:if>
                </c:forEach>
            </ul>
        </div>
        <div class="col-md-6">
            <div class="toptitle" style="width: 700px;background: #f66060;">
                <div class="search-group">
                    <div class="input-group">
                        <input type="text" class="form-control" id="search-part-btn" placeholder="Search for...">
                        <span class="input-group-btn">
							<button class="btn btn-search" type="button">搜索</button>
						</span>
                    </div>
                </div>
            </div>
            <div id="carousel-explorer" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-explorer" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-explorer" data-slide-to="1"></li>
                    <li data-target="#carousel-explorer" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="images/1.jpg" alt="...">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item">
                        <img src="images/2.jpg" alt="...">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item">
                        <img src="images/3.jpg" alt="...">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#carousel-explorer" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-explorer" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-md-3">
            <ul class="list-group list-group-2">
                <li class="list-group-item"><img src="images/4.jpg" alt=""></li>
                <li class="list-group-item"><img src="images/5.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <!--第三块，热卖商品-->
    <div class="row row-goods" id="hot-goods">
        <div class="col-md-12 title">
            <div class="col-md-5 ">
                <div class="k-border">
                    <div class="border bor-l">
                        <div class="border bor-r">
                            <div class="bor-m"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2 ">热卖商品</div>
            <div class="col-md-5 ">
                <div class="k-border">
                    <div class="border bor-l">
                        <div class="border bor-r">
                            <div class="bor-m"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <c:if test="${!empty hootGoods }">
            <c:forEach var="hootGood" items="${hootGoods }">
                <div class="col-md-3 goods_item">
                    <span class="goodID" style="display: none;">${hootGood.goodsId}</span>
                    <a href="../goodsinfo?goodId=${hootGood.goodsId}"><img src="${hootGood.goodsImage}" style="width: 194px;height: 194px;"></a>
                    <div class="goods_describe">
                        <span>${hootGood.goodsDesc}</span>
                    </div>
                    <div class="goods_price">
                        <span>￥${hootGood.goodsPrice}</span>
                    </div>
                    <div class="goods_storeName">
                        <i class="fa fa-shopping-bag" style="margin-right: 5px;color: #f06000;"></i>
                        <span>${hootGood.supplier}</span>
                    </div>
                    <div class="goods_sales">
                        <span>月销 ${hootGood.salesQty}</span>
                    </div>
                </div>
            </c:forEach>
        </c:if>
    </div>
    <!--第四块，特价商品-->
    <div class="row row-goods" id="special-goods">
        <div class="col-md-12 title">
            <div class="col-md-5 ">
                <div class="k-border">
                    <div class="border bor-l">
                        <div class="border bor-r">
                            <div class="bor-m"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2 ">特价商品</div>
            <div class="col-md-5 ">
                <div class="k-border">
                    <div class="border bor-l">
                        <div class="border bor-r">
                            <div class="bor-m"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <c:if test="${!empty specialGoods }">
            <c:forEach var="specialGood" items="${specialGoods }">
                <span class="goodID" style="display: none;">${specialGood.goodsId}</span>
                <div class="col-md-3 goods_item">
                    <a href="../goodsinfo?goodId=${specialGood.goodsId}"><img src="${specialGood.goodsImage}" style="width: 194px;height: 194px;"></a>
                    <div class="goods_describe">
                        <span>${specialGood.goodsDesc}</span>
                    </div>
                    <div class="goods_price">
                        <span>￥${specialGood.goodsPrice}</span>
                    </div>
                    <div class="goods_storeName">
                        <i class="fa fa-shopping-bag" style="margin-right: 5px;color: #f06000;"></i>
                        <span>${specialGood.supplier}</span>
                    </div>
                    <div class="goods_sales">
                        <span>月销 ${specialGood.salesQty}</span>
                    </div>
                </div>
            </c:forEach>
        </c:if>
    </div>
    <!--第五块，最新商品-->
    <div class="row row-goods" id="new-goods">
        <div class="col-md-12 title">
            <div class="col-md-5 ">
                <div class="k-border">
                    <div class="border bor-l">
                        <div class="border bor-r">
                            <div class="bor-m"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2 ">最新商品</div>
            <div class="col-md-5 ">
                <div class="k-border">
                    <div class="border bor-l">
                        <div class="border bor-r">
                            <div class="bor-m"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <c:if test="${!empty newGoods }">
            <c:forEach var="newGood" items="${newGoods }">
                <span class="goodID" style="display: none;">${newGood.goodsId}</span>
                <div class="col-md-3 goods_item">
                    <a href="../goodsinfo?goodId=${newGood.goodsId}"><img src="${newGood.goodsImage}" style="width: 194px;height: 194px;"></a>
                    <div class="goods_describe">
                        <span>${newGood.goodsDesc}</span>
                    </div>
                    <div class="goods_price">
                        <span>￥${newGood.goodsPrice}</span>
                    </div>
                    <div class="goods_storeName">
                        <i class="fa fa-shopping-bag" style="margin-right: 5px;color: #f06000;"></i>
                        <span>${newGood.supplier}</span>
                    </div>
                    <div class="goods_sales">
                        <span>月销 ${newGood.salesQty}</span>
                    </div>
                </div>
            </c:forEach>
        </c:if>
    </div>
</div>
</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    //商品分类
    window.onload = function () {
        var Lis = document.getElementById("topmenu").getElementsByTagName("li");
        for (i = 0; i<Lis.length; i++) {
            Lis[i].onmouseover = function () {
                this.className = "lihover";
            }
            Lis[i].onmouseout = function () {
                this.className = "";
            }
        }
    }
</script>
<script>
    //搜索
    $('#search-part-btn').focus(function(){
        window.location.href="search.html";
    })
    //物品详细
    document.addEventListener('DOMContentLoaded', function() {
        var goodsItems = document.querySelectorAll('.goods_item');

        goodsItems.forEach(function(item) {
            var goodIDElement = item.querySelector('.goodID');
            if (goodIDElement) {
                item.addEventListener('click', function() {
                    // 获取当前商品项的goodID值
                    var goodID = goodIDElement.innerText;

                    // 执行页面跳转操作，并传递goodID值
                    window.location.href = '../goodsinfo?goodId=' + goodID;
                });
            }
        });
    });
</script>
<script>
    // 获取回到顶部的链接元素
    var backToTop = document.getElementById('back-to-top');

    // 监听页面滚动事件
    window.addEventListener('scroll', function() {
        // 获取当前滚动位置
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        // 如果滚动位置大于0，显示回到顶部的链接，否则隐藏
        if (scrollTop > 0) {
            backToTop.style.display = 'block';
        } else {
            backToTop.style.display = 'none';
        }

        // 根据滚动位置改变导航栏对应部分的背景颜色
        var sections = document.querySelectorAll('.row-goods');
        for (var i = 0; i < sections.length; i++) {
            var sectionTop = sections[i].offsetTop;
            if (scrollTop >= sectionTop - 100 && scrollTop < sectionTop + sections[i].offsetHeight) {
                backToTop.parentNode.children[i].style.backgroundColor = '#007bff';
                backToTop.parentNode.children[i].style.color = '#fff';
            } else {
                backToTop.parentNode.children[i].style.backgroundColor = 'transparent';
                // backToTop.parentNode.children[i].style.color = '#333';
            }
        }
    });
</script>
<script>
    window.onload = function() {
        checkError();
    }
    function checkError() {
        var errorMsg = "${errorMsg}";
        var successMsg = "${successMsg}";
        if (successMsg){
            alert(successMsg);
            <% session.removeAttribute("successMsg"); %>
        }
        if (errorMsg) {
            alert(errorMsg);
            <% session.removeAttribute("errorMsg"); %>
        }
    }
</script>
</html>